/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view>
		<view class="banner">
			<image class="wh100" mode="aspectFill" :src="hostUrl+store.store_banner" role="img"></image>
			<view class="shops-item">
				<view class="shops-info">
					<view class="shops-pic">
						<image class="wh100" :src="hostUrl+store.store_logo" role="img"></image>
					</view>
					<view class="shops-mes">
						<view class="shops-name">{{store.store_name}}</view>
						<view @tap="focusStore" class="follow-dtns" v-if="activeFocus">
							
								<image :src="imgUrl+'common/heart02.png'"  role="img"></image>
								
								<text>
									关注
								</text>
							
						</view>
						<view @tap="delfocusStore" class="follow-dtns" v-if="!activeFocus">
							
							
								<image :src="imgUrl+'common/heart_02.png'"  role="img"></image>
								<text>
									已关注
								</text>
							
						</view>
						<view class="shops-des">{{store.store_collect}}人已关注</view>
					</view>
				</view>
				<view class="goods-num-list">
					<navigator class="goods-num-item" :url="'/pages/store/good_list/good_list?store_id='+storeId" role="navigation">
						<view class="num-item-title after">全部商品</view>
					</navigator>
					<navigator class="goods-num-item" :url="'/pages/store/good_list/good_list?mode=is_new&store_id='+storeId" role="navigation">
						<view class="num-item-title">新品</view>
					</navigator>
					<navigator class="goods-num-item" :url="'/pages/store/good_list/good_list?&mode=is_hot&store_id='+storeId" role="navigation">
						<view class="num-item-title">热销</view>
					</navigator>
				</view>
				<view class="search-bar">
				<!-- 	<icon @tap="searchGoods" size="14" type="search" role="img"></icon> -->
					<unicon @click="searchGoods" size="16" type="search" role="img"></unicon>
					<input @input="inputSearch" v-model="searchData" placeholder="搜商品" placeholder-class="place">

					</input>
				</view>
			</view>
		</view>
		<view class="nav">
			<navigator @tap="changeTab" class="nav-item " :class="[chooseActive==0?'choose':'']" data-href="default" data-type="0" role="navigation">默认</navigator>
			<navigator @tap="changeTab" class="nav-item" :class="[chooseActive==1?'choose':'']" :data-href="requestData.orderby_sales_sum" data-type="1" role="navigation">销量</navigator>
			<navigator @tap="changeTab" class="nav-item" :class="[chooseActive==2?'choose':'']" :data-href="requestData.orderby_price" data-type="2" role="navigation">
				价格
				<view class="ico-dir" :class="[activeUrl[1]!='order_by=shop_price'?'':(activeUrl[2]=='sort=asc'?'ico-dir-up':'ico-dir-dn')]" style="background-image: url(common/sxjt.png);"></view>
			</navigator>
			<view @tap="tab" class="exhibition_one" :class="[flag==true?'exhibition_one':'exhibition_two']" style="background-image:url(common/listo.png)">
			</view>
			<!-- 橱窗式 -->
			<view class="goods-list" v-if="flag">
				<block  v-for="(item,index) in storeList"  :key="index">
					<navigator class="goods-item" :url="'/pages/goods/goodsInfo/goodsInfo?goods_id='+item.goods_id" role="navigation">
						<view class="goods-pic">
							<image class="wh100" :src="hostUrl+'/mall/goods/thumb_image?goods_id='+ item.goods_id+'&width='+goodsImgWidth+'&height='+goodsImgHeight+'&'+item.goods_id+'.'+imgType"role="img"></image>
						</view>
						<view class="goods-name ellipsis-2">{{item.goods_name}}</view>
						<view class="bottom">
							<view class="goods-price">
								<text>
									￥
								</text>
								{{item.shop_price.toFixed(2)}}
							</view>
							<view class="evaluation">
								<text>
									{{item.comment_count}}条评价
								</text>
							</view>
						</view>
					</navigator>
				</block>
			</view>
			
			<!-- 列表式 -->
			
			<view class="choice_box vertical_type" >
				<block v-if="!flag" v-for="(item,index) in storeList" :key="index">
					<view class="choice_list">
						<navigator :url="'/pages/goods/goodsInfo/goodsInfo?goods_id='+item.goods_id"  role="navigation">
							<view class="choice_item">
								<navigator :url="'/pages/goods/goodsInfo/goodsInfo?goods_id='+item.goods_id"  role="navigation">
									<image :src="hostUrl+'/mall/goods/thumb_image?goods_id='+ item.goods_id+'&width='+goodsImgWidth+'&height='+goodsImgHeight+'&'+item.goods_id+'.'+imgType" role="img"></image>
								</navigator>
								<view class="choice_footer">
									<view class="goods_name">{{item.goods_name}}</view>
									<view class="price">
										<text>
											￥
										</text>
										{{item.shop_price.toFixed(2)}}
									</view>
									<view class="similer">
										<text>
											{{item.comment_count}}条评价
										</text>
									</view>
								</view>
							</view>
						</navigator>

					</view>
				</block>
			</view>
			
			<view class="show">
				<image :src="imgUrl+'common/c-line.png'" role="img"></image>
				<text>
					已显示完该类商品
				</text>
			</view>
			<view class="store-mes">
				<view class="store-btn">
					<navigator :url="'/pages/store/about/about?store_id='+store.store_id" role="navigation">
						<image :src="imgUrl+'common/shop_icon.png'" role="img"></image>
						<view>店铺详情</view>
					</navigator>
				</view>
				<view class="store-btn">
					<navigator :url="'/pages/store/good_list/good_list?store_id='+storeId" role="navigation">
						<image :src="imgUrl+'common/product_icon_black.png'" role="img"></image>
						<view>商品分类</view>
					</navigator>
				</view>
				<view bindtap="contactService">
					<image :src="imgUrl+'common/service_icon_black.png'" role="img"></image>
					<view>联系客服</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getStore,
		getStoreGoods,getGoodsFilter,storeFocus,getStoreFocus,delStoreFocus
	} from "@/api/api.js";
	import config from "@/api/config.js";
	import unicon from "@/components/uni-icons/uni-icons.vue";
	import {mapState} from "vuex";
	export default {
		data() {
			return {
				hostUrl: config.host,
				imgUrl:config.imgUrl,
				isShow: true,
				chooseActive:0,
				activeUrl:"",
				storeId:"",//店铺id
				activeFocus:true,//店铺关注 true 关注
				
				store: "", //店铺信息
				searchData:"",//搜索数据
				requestData:"",//筛选请求的数据
				flag:true,
				storeList:[],//商品
				total:0,//条数
				p:1,//分页
			};
		},
		components:{unicon},
		computed: {
			...mapState(['hasLogin','imgType','goodsImgHeight','goodsImgWidth'])
		},
		onLoad(options) {
			console.log(options)
			let storeId = options.store_id;
			this.storeId=storeId;
			/*获取店铺信息*/
			this._getStore(storeId)
			let params={
				"store_id":storeId,//店铺id
				"p":this.p,
			}
			/*店铺商品*/ 
			this._getStoreGoods(params)
			/*店铺关注*/
			if(this.hasLogin){
				this._getStoreFocus(this.storeId)
			}
			
		},
		methods: {
			_getStore(storeId) {
				getStore(storeId).then(res => {
					console.log(res)
					this.store = res;
				})
			},
			/*查询关注*/
			_getStoreFocus(storeId){
				getStoreFocus(storeId).then(res=>{
					console.log(res)
					if(res){
						this.activeFocus=false
					}
				})
			},
			/*关注*/
			_storeFocus(storeId){
				storeFocus(storeId).then(res=>{
					console.log(res)
					if(res.status==1){
						this.activeFocus=false;
					}
				})
			},
			focusStore(){
				this._storeFocus(this.storeId)
			},
			/*取消关注*/ 
			_delStoreFocus(storeId){
				delStoreFocus(storeId).then(res=>{
					console.log(res)
					if(res.status==1){
						this.activeFocus=true;
						
					}
				})
			},
			delfocusStore(){
				this._delStoreFocus(this.storeId)
			},
			_getStoreGoods(params){
				getStoreGoods(params).then(res=>{
					console.log(res)
					this.storeList=this.storeList.concat(res.records);
					this.total=res.total;
					var request='store_id='+ params.store_id
					
					this._getGoodsFilter(request);
				})
			},
			inputSearch(){
				console.log(this.searchData)
				let params={
					goods_name:this.searchData
				}
				this._getStoreGoods(params)
				
			},
			/*筛选属性*/
			_getGoodsFilter(url){
				getGoodsFilter(url).then(res=>{
					console.log(url)
					console.log(res)
					this.requestData=res;
					// this.filterAttr=res.filter_attr;
					// this.filterBrand=res.filter_brand;
					// this.filterPrice=res.filter_price;
				})
			},
			request(e){
				var that=this;
				uni.request({
				 url:that.hostUrl +'/mall/goods/page?'+ e,
				 // data,
				
				 header:{
				     'content-type': 'application/json' // 默认值
				 },
				
				 success:function(res){
					
				   console.log(res)
				   var request1=e.replace(/&/g,"%26");
				   that._getGoodsFilter(request1)
					that.storeList=res.data.records;
				    
				 },
				 fail:function(res){
				   
				 },
				 complete:function(){
				    
				 }
				 })
			},
			onReachBottom(){//下拉加载数据
				console.log("滚动加载")
				if(this.storeList.length===this.total){
					uni.showToast({
						icon:"none",
					    title: '加载完了',
					    duration: 2000
					});
					 return false;
				}
				this.p++;
				let params={
					"store_id":this.storeId,//店铺id
					"p":this.p,
				}
				this._getStoreGoods(params)
				
			},
			changeTab(e){
				console.log(e)
				
				let type=e.currentTarget.dataset.type;
				this.chooseActive=type;
				this.storeList.length=0;
				this.p=1;
				if(type==0){
					let params={
						"store_id":this.storeId,//店铺id
						"p":this.p,
					}
					/*店铺商品*/ 
					this._getStoreGoods(params)
				}else{
					this.chooseActive=type;
					var hrefData=e.currentTarget.dataset.href.split("&")
					this.activeUrl=hrefData;
					this.request(e.currentTarget.dataset.href)
				}
				
			},
			tab(){
				this.flag=!this.flag
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #f5f5f5;
		padding-bottom: 100rpx;
	}

	.banner {
		height: 258rpx;
		background: linear-gradient(to right, #FE3C2A, #FE696A);
	}

	.shops-item {
		padding: 30rpx 30rpx 20rpx 30rpx;
		position: absolute;
		top: 0;
		color: #fff;
		width: 690rpx;
	}

	.shops-info {
		display: flex;
		height: 120rpx;
	}

	.shops-pic {
		width: 120rpx;
		height: 120rpx;
		margin-right: 24rpx;
	}

	.shops-mes {
		position: absolute;
		left: 174rpx;
		height: 120rpx;
		width: 100%;
	}

	.shops-pic .wh100 {
		border-radius: 10rpx;
	}

	.shops-name {
		font-size: 34rpx;
		font-weight: 600;
	}

	.shops-des {
		font-size: 28rpx;
		position: absolute;
		bottom: 10rpx;
		left: 215rpx;
	}

	.follow-dtns {
		width: 140rpx;
		height: 46rpx;
		line-height: 46rpx;
		padding-right: 20rpx;
		font-size: 28rpx;
		color: #fff;
		text-align: right;
		border: 1px solid #f3f3f3;
		border-radius: 10rpx;
		margin-top: 30rpx;
		position: relative;
	}

	.follow-dtns image {
		width: 36rpx;
		height: 32rpx;
		position: absolute;
		top: 8rpx;
		left: 12rpx;
	}

	.goods-num-list {
		display: flex;
		margin-top: 44rpx;
	}

	.goods-num-item {
		margin-right: 80rpx;
	}

	.goods-num {
		height: 72rpx;
		line-height: 72rpx;
		font-size: 36rpx;
	}

	.num-item-title {
		line-height: 1;
		font-size: 28rpx;
		color: #fff;
	}

	.num-item-title.after {
		border-radius: 2rpx;
		border-bottom: 4rpx solid #fff;
		padding-bottom: 12rpx;
	}

	.goods-list {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}

	/* 默认，销量，价格-s */
	.nav {
		width: 100%;
		height: 90rpx;
		background: #fff;
	}

	.nav-item {
		float: left;
		width: 20%;
		height: 90rpx;
		line-height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		border-bottom: 1px solid #f3f3f3;
		background-color: #fff;
		color: #333;
	}

	.choose {
		color: #ff1919;
	}
	.place{
		font-size: 24rpx;
	}
	.nav-item .ico-dg {
		width: 18rpx;
		height: 12rpx;
		margin-left: 10rpx;
		line-height: 0;
	}

	.nav-item .ico-filter {
		width: 20rpx;
		height: 20rpx;
		margin-left: 10rpx;
		line-height: 0;
	}

	.ico-dir {
		width: 16rpx;
		height: 22rpx;
		margin-left: 10rpx;
		background-repeat: no-repeat;
		background-size: cover;
		background-position-x: 0;
	}

	.ico-dir-dn {
		background-position-x: -16rpx;
	}

	.ico-dir-up {
		background-position-x: -32rpx;
	}

	.exhibition_one {
		float: right;
		width: 42rpx;
		height: 40rpx;
		background-position: 0 0;
		margin: 25rpx 30rpx;
		background-size: 82rpx 40rpx;
		background-repeat: no-repeat;
	}

	.exhibition_two {
		background-position: -40rpx 0;
	}

	/* 默认，销量，价格-e */
	.goods-list .goods-item:nth-child(odd) {
		margin: 10rpx 10rpx 0 10rpx;
	}

	.goods-item {
		width: 360rpx;
		height: 570rpx;
		background-color: #fff;
		margin-top: 10rpx;
		position: relative;
	}

	.search-bar {
		width: 160rpx;
		height: 50rpx;
		line-height: 50rpx;
		padding-left: 20rpx;
		border-radius: 25rpx;
		background: #fff;
		position: absolute;
		right: 30rpx;
		bottom: 25rpx;
		font-size: 28rpx;
		color: #666;
	}

	.search-bar icon {
		margin-top: 10rpx;
		
	}
//#ifdef H5
.search-bar icon {
		margin-top: 10rpx;
		position: relative;
		top:-10rpx;
	}
//#endif
	.search-bar input {
		position: absolute;
		top: 0;
		right: 0;
		width: 130rpx;
		text-align: center;
	}

	.goods-pic {
		width: 360rpx;
		height: 360rpx;
	}

	.goods-name {
		width: 312rpx;
		height: 64rpx;
		padding: 16rpx 24rpx 0 24rpx;
		font-size: 24rpx;
		line-height: 32rpx;
		color: #333;
	}

	.goods-list .label {
		color: #999;
		font-size: 20rpx;
		padding: 12rpx 24rpx 0 24rpx;
	}

	.goods-list .label text {
		display: inline-block;
		padding: 10rpx 16rpx;
		background-color: #e6e6e6;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.goods-price {
		font-size: 28rpx;
		padding: 14rpx 24rpx 0 24rpx;
		color: #ff1919;
		font-weight: 600;
	}

	.goods-price text {
		font-size: 20rpx;
	}

	.goods-list .bottom {
		position: absolute;
		bottom: 0;
		height: 100rpx;
		border-top: 2rpx solid #f3f3f3;
		width: 100%;
	}

	.goods-list .evaluation {
		color: #999;
		font-size: 20rpx;
		padding: 8rpx 24rpx;
	}

	.goods-list .evaluation text {
		margin-right: 20rpx;
	}

	.more-btn {
		height: 32rpx;
		padding: 34rpx 30rpx;
		text-align: right;
		background-color: #fff;
		font-size: 28rpx;
		line-height: 32rpx;
	}

	.arrow-right {
		display: inline-block;
		width: 32rpx;
		height: 32rpx;
		color: #fff;
		background-color: #ff3b3b;
		text-align: center;
		border-radius: 6rpx;
	}

	.store-mes {
		position: fixed;
		bottom: 0;
		height: 100rpx;
		text-align: center;
		background-color: #fff;
		border-top: 1px solid #f3f3f3;
	}

	.store-mes .store-btn:nth-child(1) {
		color: #ff1919;
	}

	.store-mes>view {
		width: 250rpx;
		font-size: 24rpx;
		float: left;
		color: #999;
	}

	.store-mes image {
		width: 34rpx;
		height: 34rpx;
		margin: 12rpx 0 6rpx 0;
	}

	.show {
		height: 30rpx;
		width: 100%;
		font-size: 24rpx;
		color: #999;
		margin-top: 155rpx;
		margin-bottom: 155rpx;
		position: relative;
	}

	.show image {
		width: 750rpx;
		height: 6rpx;
		position: absolute;
		left: 0;
		top: 12rpx;
	}

	.show text {
		height: 30rpx;
		line-height: 30rpx;
		position: absolute;
		width: 750rpx;
		text-align: center;
		left: 0;
	}

	/* 列表式-s  */
	.choice_box {
		font-size: 12px;
		padding-bottom: 10rpx;
	}

	.choice_box navigator {
		height: 260rpx;
	}

	.choice_box .choice_list .choice_item {
		width: 730rpx;
		height: 250rpx;
		float: left;
		margin: 10rpx 0 0 10rpx;
		background: #fff;
		position: relative;
	}

	.choice_box .choice_list .choice_item navigator {
		display: inline-block;
	}

	.choice_box .choice_list .choice_footer {
		position: absolute;
		left: 250rpx;
		top: 0;
		float: right;
		display: block;
		line-height: 17rpx;
		width: 438rpx;
		height: 222rpx;
		padding: 14rpx 20rpx;
		background-color: #fff;
	}

	.choice_list .choice_footer .goods_name {
		height: 74rpx;
		line-height: 36rpx;
		text-align: left;
		color: #333333;
		font-size: 26rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.choice_item .pro-label {
		color: #ff3b3b;
		font-size: 20rpx;
		position: absolute;
		top: 110rpx;
		margin-bottom: 2rpx;
	}

	.choice_box .choice_list image {
		width: 250rpx;
		height: 250rpx;
	}

	.choice_item .pro-label view {
		border-radius: 10rpx;
		display: inline-block;
		margin-right: 20rpx;
		padding: 10rpx 16rpx;
		margin-bottom: 4rpx;
		color: #999;
		background: #e6e6e6;
	}

	.choice_list .choice_footer .price {
		color: #ff3b3b;
		font-size: 28rpx;
		font-weight: 600;
		position: absolute;
		bottom: 62rpx;
	}

	.choice_footer .price text:nth-child(1) {
		font-size: 20rpx;
	}

	.choice_list .choice_footer .similer {
		position: absolute;
		bottom: 10rpx;
		text-align: center;
		color: #999;
		width: fit-content;
		line-height: 30rpx;
		border-radius: 5rpx;
		font-size: 20rpx;
	}

	.choice_footer .similer text:nth-child(1) {
		margin-right: 32rpx;
	}
</style>
